.home {
  .header {
    width: 100%;
    height: 60rpx;
    background-color: #23262d;
    box-sizing: border-box;
    padding: 0 40rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 28rpx;

    .location {
      display: flex;
      // height: 40rpx;
      height: 100%;
      align-items: center;

      .city {
        // width: 56rpx;
        height: 40rpx;
        color: #dfdfdf;
        margin-right: 9rpx;
        // line-height: 40rpx;
        // display: block;
        // align-items: center;
      }

      image {
        width: 26.3rpx;
        height: 26rpx;
      }
    }

    .search {
      position: relative;
      width: 518rpx;
      height: 60rpx;

      .search-icon {
        position: absolute;
        top: 16rpx;
        left: 24rpx;
        width: 27rpx;
        height: 27rpx;
      }

      input {
        box-sizing: border-box;
        padding: 0rpx 0 0 66rpx;
        font-size: 28rpx;
        color: #7A7A7A;
        width: 100%;
        height: 100%;
        background: #33363d;
        box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.33);
        border-radius: 26rpx;
      }
    }

    .calendar {
      width: 36rpx;
      height: 37rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .banner {
    width: 100%;
    height: 390rpx;
    padding: 34rpx 0 44rpx 0;
    display: flex;
    justify-content: center;

    swiper.swiper {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;

      .swiper_item {

        .img {
          width: 670rpx;
          height: 305rpx;
          margin: 20rpx 0;
          border-radius: 10rpx;
          transition: all .5s;

          &.active {
            margin: 0;
            height: 345rpx;
          }

          // width: 100%;
          // height: 100%;
        }
      }
    }

    swiper.swiper .wx-swiper-dot {
      background: #B2B2B2;
      width: 8rpx;
      height: 8rpx;
      // border-radius: 50%;
      margin: 0 8rpx !important;
    }

    swiper.swiper .wx-swiper-dot.wx-swiper-dot-active {
      opacity: 1;
      background-color: #fff;
      width: 28rpx;
      height: 6rpx;
      border-radius: 26rpx;
    }
  }

  .hot {
    width: 100%;

    .hot_t {
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-sizing: border-box;
      padding: 0 38rpx 0 40rpx;

      .hot_t_l {
        display: flex;
        align-items: center;

        .line {
          margin-right: 10rpx;
          width: 8rpx;
          height: 34rpx;
          // transform: rotate(-270deg);
          background-image: linear-gradient(90deg, #F26182 5%, #F1A064 100%);
        }

        .title {
          font-size: 36rpx;
          color: #DFDFDF;
        }
      }

      .hot_t_r {
        .all {
          opacity: 0.78;
          font-size: 24rpx;
          margin-right: 10rpx;
          color: #DFDFDF;
        }

        image {
          width: 22rpx;
          height: 22rpx;
        }
      }
    }

    .hot_c {
      margin-top: 16rpx;

      // padding: 0 0 0 50rpx;
      .movie_list {
        display: block;
        white-space: nowrap;
        // display: flex;
        // flex-wrap: wrap;
        width: 100vw;
        height: 396rpx;
        padding: 0 0 56rpx 4rpx;

        .movie-item {
          display: inline-block;
          width: 180rpx;
          // display: flex;
          // flex-direction: column;
          // align-items: center;
          // text-align: center;
          margin-left: 46rpx;

          &:last-child {
            margin-right: 46rpx;
          }

          image {
            width: 180rpx;
            height: 244rpx;
          }

          .title {
            width: 149rpx;
            font-size: 24rpx;
            overflow: hidden;
            text-align: center;
            white-space: nowrap;
            text-overflow: ellipsis;
            color: #DFDFDF;
            margin: 12rpx auto 7rpx;
          }

          .buy {
            width: 100rpx;
            height: 44rpx;
            line-height: 44rpx;
            text-align: center;
            margin: 0 auto;
            background-image: linear-gradient(150deg, #F25B86 0%, #F1AC5E 100%);
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.50);
            border-radius: 22rpx;
            font-size: 24rpx;
            color: #DFDFDF;
            text-shadow: 0 4px 8px rgba(49, 49, 49, 0.50);
          }
        }
      }
    }
  }

  .comming {
    .time {
      opacity: 0.55;
      font-family: PingFangSC-Regular;
      font-size: 24rpx;
      color: #DFDFDF;
    }
  }

  .preview {
    .hot_c {
      margin-top: 16rpx;

      // padding: 0 0 0 50rpx;
      .movie_list {
        display: block;
        white-space: nowrap;
        // display: flex;
        // flex-wrap: wrap;
        width: 100vw;
        height: 375rpx;
        padding: 0 0 56rpx 4rpx;

        .movie-item {
          display: inline-block;
          width: 590rpx;
          height: 100%;
          margin-left: 46rpx;

          &:last-child {
            margin-right: 46rpx;
          }

          .video {
            width: 590rpx;
            height: 320rpx;
          }

          .desc {
            width: 590rpx;
            font-size: 26rpx;
            color: #DFDFDF;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-top: 16rpx;
          }
        }
      }
    }
  }
}